import Vue from "vue";
import axios from "axios";
import { Notification } from "element-ui";

const http = axios.create({
  baseURL: "http://localhost:8082",
  timeout: 5000,
});


/**
 * 1.所有的请求都会走该拦截器， config就是网络请求的配置.
 * 2.会将原本的请求的http信息传递给config, 然后最终我们发送到服务器的http的信息是由该方法返回的。
 */
http.interceptors.request.use((config) => {
  // 获取cookie中的access_token
  let accessToken = Vue.$cookies.get("access_token");

  // 如果说cookie中包含有 access_token 那么就将其放到请求头中
  if (accessToken) {
    config.headers["Authorization"] = `Bearer ${accessToken}`;
  }
  return config;
});

/**
 * 所有的响应的都会经过 response, response.use() 方法接收两个参数:
 *  1.第一个参数当响应的状态码为 2xx, resp是响应的数据
 *  2.第二个参数当响应的状态码为 4xx, 5xx， 就走第二个方法 err => {}
 */
let notifyStatus = true;
http.interceptors.response.use(
  (resp) => {
    return resp;
  },
  (err) => {
    let status = err.response.status;
    if (status === 401 && notifyStatus) {
      // 401表示没有登录或者认证过期，那么需要清空cookie, 然后重新登录
      notifyStatus = false;
      Vue.$cookies.remove("access_token");
      Vue.$cookies.remove("username");
      Notification({
        title: "提示",
        message: "登录已过期，需要重新登录",
        type: "info",
      });
      setTimeout(() => {
        notifyStatus = true;
        location.href = "http://localhost:9528/#/login";
      }, 1200);
    } else if (status === 403) {
    } else if (status === 500) {
      Notification({
        title: "提示",
        message: "服务器端错误",
        type: "info",
      });
    }
  }
);




export default http;
